﻿@page "/ChartCustomization"
@inject WeatherForecastService ForecastService
<div class="demo-description" id="Tooltip">
    <h2><DemoNavLink Link="ChartCustomization#Tooltip" />Charts - Tooltip Customization</h2>
    <p>
        The <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxChartTooltip">DxChartTooltip</a> component enables you to specify templates for the tooltips that are displayed when the mouse hovers over a chart series.
        A <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.ChartTooltipData">ChartTooltipData</a> type object represents the template’s context.
        This object stores information about the hovered series point.
    </p>
</div>
<DxChart Data="@SalesData"
         CssClass="mw-1100">
    <DxChartTitle Text="Sales amount" />
    <DxChartTooltip>
        <div class="p-3">
            <p class="text-align-center"><b>@context.Point.SeriesName</b></p>
            <p>City: @context.Point.Argument</p>
            <p>Amout: @context.Point.Value</p>
        </div>
    </DxChartTooltip>
    <DxChartBarSeries Name="2017" Filter="@((SaleInfo s) => s.Date.Year == 2017)" AggregationMethod="Enumerable.Sum"
                      ArgumentField="@(s => s.City)" ValueField="@(s => s.Amount)" />
    <DxChartBarSeries Name="2018" Filter="@((SaleInfo s) => s.Date.Year == 2018)" AggregationMethod="Enumerable.Sum"
                      ArgumentField="@(s => s.City)" ValueField="@(s => s.Amount)" />
    <DxChartLineSeries Name="2019" Filter="@((SaleInfo s) => s.Date.Year == 2019)" AggregationMethod="Enumerable.Sum"
                       ArgumentField="@(s=> s.City)" ValueField="@(s => s.Amount)" />
</DxChart>
<CodeSnippet_Charts_TooltipCustomization />

<div class="demo-description" id="Legend">
    <h2><DemoNavLink Link="ChartCustomization#Legend" />Charts - Legend Customization</h2>
    <p>
        The <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxChartSeriesLegendItem">DxChartSeriesLegendItem</a> component in a chart series’ markup allows you to customize a legend item’s appearance.
        This component allows you to change a legend item’s position and visibility.
        You can also customize the legend item text via the <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxChartSeriesLegendItem.Text">Text</a> and <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxChartSeriesLegendItem.TextTemplate">TextTemplate</a> properties.

        To show and hide series when a user clicks the corresponding legend item, set the <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxChartLegend.AllowToggleSeries">AllowToggleSeries</a> property to <b>true</b>.
    </p>
</div>

<DxChart Data="@SalesData"
         CssClass="mw-1100">
    <DxChartTitle Text="Sales amount">
        <DxChartSubTitle Text="by cities" />
    </DxChartTitle>
    <DxChartBarSeries Name="2017" Filter="@((SaleInfo s) => s.Date.Year == 2017)" AggregationMethod="Enumerable.Sum" ArgumentField="@(s => s.City)" ValueField="@(s => s.Amount)"></DxChartBarSeries>
    <DxChartBarSeries Name="2018" Filter="@((SaleInfo s) => s.Date.Year == 2018)" AggregationMethod="Enumerable.Sum" ArgumentField="@(s => s.City)" ValueField="@(s => s.Amount)"></DxChartBarSeries>
    <DxChartLineSeries Name="2019" Filter="@((SaleInfo s) => s.Date.Year == 2019)" AggregationMethod="Enumerable.Sum" ArgumentField="@(s=> s.City)" ValueField="@(s => s.Amount)">
        <DxChartSeriesLegendItem IconCssClass="oi oi-flag">
            <TextTemplate>Last year</TextTemplate>
        </DxChartSeriesLegendItem>
    </DxChartLineSeries>
    <DxChartLegend AllowToggleSeries="true" Orientation="Orientation.Vertical" HorizontalAlignment="HorizontalAlignment.Right">
        <DxChartTitle Text="Years">
            <DxChartSubTitle Text="(2017-2019)"></DxChartSubTitle>
        </DxChartTitle>
    </DxChartLegend>
</DxChart>
<CodeSnippet_Charts_LegendCustomization />

<div class="demo-description" id="MultiplePanes">
    <h2><DemoNavLink Link="ChartCustomization#MultiplePanes" />Charts - Multiple Panes Customization</h2>
    <p>
        The <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxChart-1">Chart</a> component allows you to create charts with multiple panes located under each other.
        A pane can display one or more series and can share the argument axis with other panes.
    </p>
</div>
<DxChart Data="@WeatherForecasts"
         CssClass="mw-1100">
    <DxChartTitle Text="@($"Temperature in {DateTime.Now.ToString("MMMM")}")" />
    <DxChartLegend Position="RelativePosition.Outside" VerticalAlignment="VerticalEdge.Bottom" />
    <DxChartPane Name="TopPane" />
    <DxChartPane Name="BottomPane" />
    <DxChartLineSeries Pane="TopPane" Name="Average Temperature, C" AggregationMethod="@((v) => (int)Enumerable.Average(v))" ArgumentField="@(s => s.Date.Date)" ValueField="@((WeatherForecast s) => s.TemperatureC)">
        <DxChartSeriesLabel Visible="true" />
    </DxChartLineSeries>
    <DxChartBarSeries Pane="BottomPane" Name="Max Temperature, C" AggregationMethod="@((v) => (int)Enumerable.Max(v))" ArgumentField="@(s => s.Date.Date)" ValueField="@((WeatherForecast s) => s.TemperatureC)">
        <DxChartSeriesLabel Visible="true" />
    </DxChartBarSeries>
    <DxChartBarSeries Pane="BottomPane" Name="Min Temperature, C" AggregationMethod="@((v) => (int)Enumerable.Min(v))" ArgumentField="@(s => s.Date.Date)" ValueField="@((WeatherForecast s) => s.TemperatureC)">
        <DxChartSeriesLabel Visible="true" />
    </DxChartBarSeries>
</DxChart>
<CodeSnippet_Charts_MultiplePanesCustomization />
@code {
    IEnumerable<SaleInfo> SalesData;
    WeatherForecast[] WeatherForecasts;

    protected override async Task OnInitializedAsync() {
        SalesData = await Sales.GetSalesAsync();
        WeatherForecasts = await ForecastService.GetDetailedForecastAsync();
    }
}
